<template>
  <div id="mapContainer" style="width: 100vw; height: 100vh"></div>
</template>

<script setup>
import { onMounted, nextTick, provide } from "vue";
import useInitMap from "@/utils/ol/useInitMap";

import Stats from "stats.js";


useInitMap({
  target: "mapContainer",
  onLoadEnd: onLoadEnd,
});

function onLoadEnd() {
  console.log("onLoadEnd");
}

// 使用 requestAnimationFrame 统计帧率
function monitorFPSWithRequestAnimationFrame() {
  let frameCount = 0;
  let startTime = performance.now();

  function frame() {
    const now = performance.now();
    const diff = now - startTime;
    frameCount++;
    if (diff >= 1000) {
      console.log(`1秒内平均FPS: ${Math.round(frameCount * (1000 / diff))}`);
      frameCount = 0;
      startTime = now;
    }
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

function monitorFPSWithStatsJS() {
  const stats = new Stats();
  stats.showPanel(0);
  document.body.appendChild(stats.dom);

  function animate() {
    stats.begin();

    // monitored code goes here

    stats.end();

    requestAnimationFrame(animate);
  }

  requestAnimationFrame(animate);
}

// 启动帧率监测
onMounted(() => {
  nextTick(() => {
    // monitorFPSWithRequestAnimationFrame();
    // monitorFPSWithStatsJS();
  });
});
</script>
